<template>
  <div class="container" @click="clickHandle('test click', $event)">

    <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div>

    <scroll-view scroll-y style="height: 400px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  :scroll-into-view="toView" :scroll-top="scrollTop">
      <view id="green" class="scroll-view-item bc_green"></view>
      <view id="red"  class="scroll-view-item bc_red"></view>
      <view id="yellow" class="scroll-view-item bc_yellow"></view>
      <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

    <div>
      <button @click="go">跳 跳 跳</button>
    </div>

  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      order:['red', 'yellow', 'blue', 'green', 'red'],
      motto: 'Hello World',
      userInfo: {},
      list:['1',2,3,4,5,6,7,8],
      toView: 'red',
      scrollTop: 200
    }
  },

  components: {
    card
  },
  upper: function(e) {
    console.log(e,1111111111111111)
  },
  lower: function(e) {
    console.log(e,2222222222)
  },
  scroll: function(e) {
    console.log(e,3333333333333333333333)
  },
  tap: function(e) {
    console.log(e,44444444444)
    for (var i = 0; i < this.order.length; ++i) {
      if (this.order[i] === this.toView) {
        this.toView = order[i + 1]
        break
      }
    }
  },
  tapMove: function(e) {
    console.log(e,55555555555555555555)
    this.scrollTop = this.scrollTop + 100
  },
  methods: {
    fn(item){
      console.log(item)
    },
    go(){
      wx.navigateTo({
        url:'../logs/main?id=1'
      })
    },
    bindViewTap () {
      const url = '../logs/main';
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  },
  onError (err) {
    console.log(err)
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.scroll-view-item{
  width: 80%;
  height: 200px;
  margin: auto;
}
.bc_green{
  background-color: green;
}
.bc_red{
  background-color: red;
}
.bc_yellow{
  background-color: yellow;
}
.bc_blue{
  background-color: blue;
}
</style>
